<template>
	<div class="client">
		<div class="clientcontent">
			<span class="client-title">我们的优质客户</span>

			<div class="parter">
				<span class="parter-picture"><img src="../../../static/client/list-5.jpg"/></span>
			</div>
		</div>
		<div class="many-parter">
			<div class="many-parter-many">
				<a href=""><span class="many-parter-many-a-one">合作伙伴</span></a>
				<a href=""><span class="many-parter-many-a">新设技</span></a>
				<a href=""><span class="many-parter-many-a">热门平面</span></a>
				<a href=""><span class="many-parter-many-a">热门背景墙</span></a>
				<a href=""><span class="many-parter-many-a">热门PPT</span></a>
				<a href=""><span class="many-parter-many-a">热门淘宝</span></a>
				<a href=""><span class="many-parter-many-a">热门视频</span></a>
				<a href=""><span class="many-parter-many-a">热门素材</span></a>
				<a href=""><span class="many-parter-many-a">推荐专题</span></a>

			</div>
			<div class="many-web">
				<div class="list-one">

					<a class="list-one" href="">千图网</a>
					<a class="list-one" href="">包图网</a>
					<a class="list-one" href="">POCO摄影网</a>
					<a class="list-one" href="">365音乐网</a>
					<a class="list-one" href="">火影忍者漫画</a>
					<a class="list-one" href="">动画片大全</a>
					<a class="list-one" href="">桌面背景</a>
					<a class="list-one" href="">三联</a>
					<a class="list-one" href="">婚纱摄影</a>
					<a class="list-one" href="">地图查询</a>
					<a class="list-one" href="">发型设计</a>
					<a class="list-one" href="">天堂图片网</a>
					<a class="list-one" href="">A5站长网</a>
					<a class="list-one" href="">3D溜溜网</a>

				</div>
				<div class="list-one">

					<a class="list-one" href="">5068儿童网</a>
					<a class="list-one" href="">软件下载天堂</a>
					<a class="list-one" href="">CC漫画下载</a>
					<a class="list-one" href="">筑龙网</a>
					<a class="list-one" href="">建材</a>
					<a class="list-one" href="">家居网</a>
					<a class="list-one" href="">爱美女性网</a>
					<a class="list-one" href="">图片素材网</a>
					<a class="list-one" href="">唯美图片</a>
					<a class="list-one" href="">千库网</a>
					<a class="list-one" href="">买房网</a>
					<a class="list-one" href="">装修</a>
					<a class="list-one" href="">猪八戒</a>
					<a class="list-one" href="">漂亮女人</a>
					<a class="list-one" href="">年终总结PPT模板</a>
				</div>
				<div class="list-one">
					<a class="list-one" href="">图片下载</a>
					<a class="list-one" href="">最新新闻</a>
					<a class="list-one" href="">孔夫子旧书网</a>
					<a class="list-one" href="">90设计</a>
					<a class="list-one" href="">16素材网</a>
					<a class="list-one" href="">鸡年海报</a>
					<a class="list-one" href="">学习啦</a>
					<a class="list-one" href="">播视网视频</a>
					<a class="list-one" href="">装修网</a>
					<a class="list-one" href="">桌面壁纸</a>
					<a class="list-one" href="">歌曲大全</a>
					<a class="list-one" href="">电脑百事网</a>
					<a class="list-one" href="">百姓健康网</a>
					<a class="list-one" href="">更多>></a>
				</div>
				<div class="list-one">
					<a class="list-one" href="">友情链接请联系QQ群：383130336</a>
				</div>
			</div>

		</div>
		<div class="platform">
			<div class="platform-type">
				<span class="platform-type-one"></span>

				<div class="platform-type-tow">
					<h2 class="platform-type-tow-h">专注正版设计作品交易平台</h2>
					<p class="platform-type-tow-p-one">我图网为1900万位老板，设计师，白领，老师，</p>
					<p class="platform-type-tow-p-tow">行政后勤，管理人员等提高效率</p>
					<p class="platform-type-tow-p-three">
						客服热线：
						<span class="platform-type-tow-p-three-s"></span> 咨询热线：400-600-8526
					</p>
				</div>
				<div class="guide">
					<h3 class="guide-header">客户指南</h3>
					<div class="guide-footer">
						<div class="guide-footer-one">
							<a class="guide-footer-one-a" href="">关于我们</a>
							<a class="guide-footer-one-a" href="">版权声明</a>
							<a class="guide-footer-one-a" href="">投诉举报</a>
							<a class="guide-footer-one-a" href="">联系我们</a>

						</div>
						<div class="guide-footer-tow">
							<a class="guide-footer-tow-a" href="">售后服务</a>
							<a class="guide-footer-tow-a" href="">出售作品</a>
							<a class="guide-footer-tow-a" href="">网站导航</a>
							<a class="guide-footer-tow-a" href="">图片下载</a>

						</div>
					</div>
				</div>
				<div class="approve">
					<h5 class="approve-h">安全认证</h5>
					<span class="approve-one">
					</span>
					<span class="approve-tow">
						
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {

	}
</script>

<style lang="less" rel="stylesheet/less">
	.client {
		position: absolute;
		width: 100%;
		height: 223px;
		top: 5550px;
		margin-top: 20px;
		.clientcontent {
			width: 1200px;
			height: 223px;
			margin: 0 auto;
			background: white;
			margin-bottom: 30px;
			.client-title {
				display: inline-block;
				padding-left: 48px;
				height: 84px;
				line-height: 84px;
				font-size: 20px;
				text-align: center;
			}
		}
		.many-parter {
			width: 1200px;
			height: 248px;
			margin: 0 auto;
			background: white;
			padding: 52px 24px 28px 24px;
			box-sizing: border-box;
			.many-parter-many {
				height: 56px;
				.many-parter-many-a {
					display: inline-block;
					font-size: 18px;
					color: rgb(170, 170, 170);
					padding: 0 40px 0 1px;
					&:hover,
					.many-parter-many-a {
						color: rgb(0, 179, 105);
					}
				}
				.many-parter-many-a-one {
					display: inline-block;
					padding: 0 40px 0 1px;
					font-size: 18px;
					color: rgb(0, 179, 105);
				}
			}
			.many-web {
				color: rgb(127, 127, 127);
				font-size: 14px;
				.list-one {
					color: rgb(127, 127, 127);
					display: inline-block;
					padding: 3px 5px 3px 0;
				}
			}
		}
		.platform {
			width: 100%;
			height: 275px;
			margin-top: 35px;
			background: white;
			.platform-type {
				width: 1200px;
				height: 221px;
				margin: 0 auto;
				.platform-type-one {
					display: inline-block;
					width: 181px;
					height: 140px;
					background: url(footer.png);
					background-position: 0 -430px;
					margin-top: 75px;
				}
				.platform-type-tow {
					vertical-align: top;
					display: inline-block;
					width: 450px;
					height: 217.5px;
					padding: 65px 0 0 40px;
					.platform-type-tow-h {
						height: 44px;
						color: rgb(127, 127, 127);
						font-weight: 400;
					}
					.platform-type-tow-p-one {
						height: 28px;
						color: rgb(127, 127, 127);
					}
					.platform-type-tow-p-tow {
						height: 28px;
						color: rgb(127, 127, 127);
					}
					.platform-type-tow-p-three {
						height: 52.5px;
						color: rgb(127, 127, 127);
						.platform-type-tow-p-three-s {
							display: inline-block;
							width: 112px;
							height: 36px;
							background: url(footer.png);
							background-position: -42px 0;
						}
					}
				}
				.guide {
					vertical-align: top;
					display: inline-block;
					width: 287px;
					height: 155px;
					margin-top: 64px;
					padding-left: 57px;
					border-left: 1px solid rgb(170, 170, 170);
					border-right: 1px solid rgb(170, 170, 170);
					.guide-header {
						font-weight: 200;
						font-size: 18px;
						margin-bottom: 25px;
					}
					.guide-footer {
						width: 228px;
						.guide-footer-one {
							float: left;
							.guide-footer-one-a {
								font-size: 14px;
								color: rgb(127, 127, 127);
								display: block;
								padding: 3px 0;
							}
						}
						.guide-footer-tow {
							float: right;
							display: inline-block;
							.guide-footer-tow-a {
								font-size: 14px;
								color: rgb(127, 127, 127);
								display: block;
								padding: 3px 0;
							}
						}
					}
				}
				.approve{
					vertical-align: top;
					display: inline-block;
					margin-top: 64px;
					margin-left: 20px;
					width: 142px;
					height: 157px;
					.approve-h{
						font-size: 18px;
						font-weight: 400;
						color: rgb(127, 127, 127);
					}
					.approve-one{
						width: 142px;
						height: 47px;
						display: block;
						background: url(footer.png);
						background-position: -42px -40px;
						margin-top: 20px;
					}
					.approve-tow{
						width: 142px;
						height: 47px;
						display: block;
						background: url(footer.png);
						background-position: -42px -90px;
						margin-top: 20px;
						
						
					}
				}
			}
		}
	}
</style>